<template>
  <div>
    <router-view></router-view>
    <!-- 顶部背景 -->
    <!-- <div class="top-bg"> -->
      <van-nav-bar
        class="top-bg"
        title="注册"
        left-arrow
        right-text="登录"
        @click-left="onClickLeft"
        @click-right="onClickRight"
      ></van-nav-bar>
    <!-- </div> -->
    <!-- 获取短信验证码 -->
    <van-field v-model="sms" center clearable label="+86" placeholder="请输入手机号">
      <template #button>
        <van-button size="small" type="primary" @click="send()">发送验证码</van-button>
      </template>
    </van-field>
    <!-- 表单 -->
    <van-cell-group>
      <van-field v-model="value" placeholder="请输入验证码" />
      <van-field
        v-model="password"
        name="upwd"
        type="password"
        placeholder="请输入6-18位数字字母组合密码"
        :rules="[{ validator:upwd, message: '请输入正确的密码' }]"
      />
    </van-cell-group>
    <!-- 按钮 -->
    <div style="margin: 16px;">
      <van-button disabled block type="info" native-type="submit">下一步</van-button>
    </div>
    <!-- 用户协议 -->
    <div>
      <van-radio-group v-model="radio">
        <div class="bottom">
          <van-radio shape="square"></van-radio>
          <p class="p">
            我已阅读并同意钓鱼人
            <a href="#">《用户使用协议》</a>
          </p>
        </div>
      </van-radio-group>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      sms: '',
      radio: '',
      value: '',
      password: ''
    };
  },
  methods: {
    //发送验证码
    send(){
      axios
        .post('/api/user/add',{},{
          params:{
        code: this.sms,
          }
        })
        .then(res => {
          console.log(res);
          if (res.status=== 200) {
            this.$router.push({
              name: '登录页'
            });
          } else {
            alert('密码错误');
          }
        });
    },
    onClickLeft() {
      //跳转上一页
      this.$router.push({
        name:'Login'
      }
      )
    },
    onClickRight() {
      //返回登录页
      this.$router.push({
        name: 'Login'
      });
    },
    // 验证密码
    upwd(password) {
      if (password === '' || /^[a-zA-Z0-9_]{5,17}$/.test(password) !== true) {
        return false;
      }
    }
  }
};
</script>
<style scoped>
.top-bg {
  border-image-repeat: no-repeat;
  width: 100%;
  height: 20rem;
  background-image: url(../../static/Home-img/carousel03.png);
}
.btn {
  width: 2rem;
  height: 2rem;
}
.bottom {
  display: flex;
  padding-left: 2rem;
  flex-direction: row;
}
.p {
  padding: 2rem;
}
</style>